<template>
    <div class="homePage">
        <nav class="navTop" ref="navTop" v-if="showNav==true">
            <van-field @click="toSearch" center class="searchInput" v-model="text" placeholder="Ins风配饰"/>
            <van-button class="loginBtn" round >登录</van-button>
        </nav>
        <nav class="navVirt" ref="navVirt" v-if="showNav==false">
            <van-field center v-model="text" placeholder="Ins风配饰"/>
        </nav>
        <!-- <div class="img-box">
            <img :src="carousImgSrc[index]['src']" alt="">
        </div> -->
        <van-swipe :style="{'padding-top':myMargin+'px'}" @change="onChange" class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in carousImgSrc" :key="item['src']">
                <img :src="item['src']" alt="" ref="carou">
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{curIndex+1}}/{{ carousImgSrc.length }}</div>
                <div class="my-indicator">
                    <span :class="{activeIndex:index==curIndex}" v-for="(item,index) in carousImgSrc" :key="index"></span>
                </div>
            </template>
        </van-swipe>
        <nav class="navMiddle">
            <span @click="toDiscount">限时折扣</span>
            <span @click="toDiscount">本周爆款</span>
            <router-link to="/productCate"><span>分类</span></router-link>
        </nav>
        <section>
            <div class="navBox">
                <div class="navBox-left">
                    <h3 class="titles">限时折扣</h3>
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
                <span @click="toDiscount">更多</span>
            </div>
            <div class="contBox">
                <div class="singleBox" v-show="index<=2" v-for="item,index in imgSrc" :key="item['src']">
                    <img :src="item['src']" alt="" @click="toSearchGoods">
                    <div class="text-box">
                        <span>{{item['name']}}</span><br/>
                        <p><span><strong class="priceText">￥{{item['jg']}}</strong></span></p>
                        <p><span class="oldPrice">原</span><del>￥1233</del></p>
                    </div>
                </div>
            </div>
            <div class="navBox">
                <h3 class="titles">本周爆款</h3>
                <span>更多</span>
            </div>
            <div class="contBox">
                <div class="singleBox" v-show="index<=2" v-for="item,index in imgSrc" :key="item['src']">
                    <img :src="item['src']" alt="" @click="toSearchGoods">
                    <div class="text-box">
                        <span>{{item['name']}}</span><br/>
                        <p><span><strong class="priceText">￥{{item['jg']}}</strong></span></p>
                    </div>
                </div>
            </div>
            <h3 class="titles">为你推荐</h3>
            <div class="mainContext">
                <div class="shopBox" v-for="item in imgSrc" :key="item['src']">
                    <img :src="item['src']" alt="" @click="toSearchGoods">
                    <div class="text-box">
                        <span>{{item['name']}}</span><br/>
                        <p><span class="coupon typeOne">{{item['jiag']}}</span><span class="coupon typeTwo">{{item.juan}}</span></p>
                        <p><span><strong class="priceText">￥{{item['jg']}}</strong></span></p>
                    </div>
                </div>
                <h3 class="noMore">没有更多了哦~</h3>
            </div>
            <!-- <div class="www">
                <router-link to="/home">首页</router-link>
                <router-link to="/productCate">分类</router-link>
                <router-link to="/messageList">消息</router-link>
                <router-link to="/shoppingCart">购物车</router-link>
                <router-link to="/mypage">我的</router-link>
            </div> -->
            <div>
            <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/productCate">分类</van-tabbar-item>
            <van-tabbar-item icon="chat-o" to="/messageList">消息</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/shoppingCart">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/mypage">我的</van-tabbar-item>
            </van-tabbar>
        </div>
        </section>
    </div>
</template>
<script setup lang="ts">
    import {getShopList,getCarousImgs} from "@/servers/homeServer"
    import { onMounted, ref } from "vue"
    import { useRouter } from "vue-router"

    let active =ref(0)

    //轮播图
    let text = ref('')
    let carousImgSrc = ref([])
    let curIndex = ref(0)
    onMounted(()=>{
        getCarousImgs()
        .then((res:any)=>{
            carousImgSrc.value=res.data
            // console.log(res.data);
        })
    })
    const onChange = (index:number)=>{
        curIndex.value=index
    }

    //路由跳转
    let $router = useRouter();
    let toSearch = ()=>{
        $router.push({path:"/search"})
    }
    let toDiscount = ()=>{
        $router.push({path:"/discount"})
    }
    let toSearchGoods = ()=>{
        $router.push({path:"/searchGoods"})
    }

    //为你推荐数据
    let imgSrc = ref([])
    onMounted(()=>{
        getShopList()
        .then((res:any)=>{
            imgSrc.value= res.data
            console.log(imgSrc.value);
        })
    })

    //限时折扣倒计时
    const time = ref(30 * 60 * 60 * 1000);

    //顶部导航栏滚动变换并悬挂
    let navTop:any = ref(null)
    let navVirt:any = ref(null)
    let showNav = ref(true)
    let myMargin = ref(0)
    window.onscroll=()=>{
        let temp = document.documentElement.scrollTop;
        // console.log(temp);
        if(temp>50){
            // console.log(navTop.value);
            // navTop.value.style.display="none"
            // navTop.value.style.display="none"
            showNav.value=false;
            myMargin.value=50;
        }
        if(temp<50){
            // navTop.value.style.display=""
            showNav.value=true;
            myMargin.value=0;
        }
    }
</script>

<style lang="scss" scoped>
.www{
    position: fixed;
    // position: absolute;
    width: 100%;
    height: 50px;
    bottom:0;
    background: #ffffff;
    border-top:3px solid #eae9e5;
    z-index: 999;
    left: 0;
    display: flex;
    justify-content: space-around;
    line-height: 50px;
    // margin: 0;
}
.homePage{
        .navTop{
            margin: 1rem;
            display: flex;
            justify-content: space-around;
        }
        .navVirt{
            position: fixed;
            width: calc(100% - 1rem);
            background: white;
            left: 0;
            margin: 0;
            padding: 1rem;
            z-index: 999;
        }
        .navMiddle{
            margin: 1rem;
            display: flex;
            justify-content: space-around;
            // font-size: 1em;
        }
        .van-field{
            background: #eae9e5;
            border-radius: 50px;
            -webkit-text-fill-color: #c1ab96;
            height: 2rem;
            width: calc(100% - 2rem);
        }
        .searchInput{
            background: #eae9e5;
            border-radius: 50px;
            -webkit-text-fill-color: #c1ab96;
            height: 2rem;
            width: 70%;
        }
        .loginBtn{
            // float: right;
            width: calc(30% - 2rem);
            border: 1px solid #c1ab96;
            color: #c1ab96;
            height: 2rem;
        }
        .my-swipe{
            overflow: hidden;
            width: 100%;
            // height: 180px;
            img{
                width: 100%;
                height: 50vw;
            }
            .custom-indicator {
                position: absolute;
                right: 5px;
                bottom: 10px;
                color: white;
                padding: 2px 0.8rem;
                border-radius: 10px;
                font-size: 1rem;
                background: #847d78;
                opacity: 0.8;
            }
            .my-indicator {
                position: absolute;
                width: 100%;
                // left: 50%;
                text-align: center;
                bottom: 10px;
                color: white;
                padding: 2px 0.8rem;
                border-radius: 10px;
                font-size: 1rem;
                // background: #847d78;
                opacity: 0.8;
                span{
                    display: inline-block;
                    width: 0.5rem;
                    height: 0.5rem;
                    margin: 0 5px;
                    border-radius: 10px;
                    background: white;
                    // color: gray;
                }
                .activeIndex{
                    background: #c1ab96;
                }
            }
        }
        span{
            font-size: 1.1rem;
            font-weight: bold;
            color: #71a284;
        }
        section{
            padding: 1rem 0.5rem;
            width: 100%;
            background: #c1ab96;
            .navBox{
                width: calc(100% - 1rem);
                display: flex;
                justify-content: space-between;
                span{
                    color: white;
                    margin-right: 0.5rem;
                }
                .navBox-left{
                    display: flex;
                    .van-count-down{
                        .block{
                            background: #333333;
                            // height: 1.2rem;
                            padding: 2px;
                            display: inline-block;
                            width: 22px;
                            text-align: center;
                            font-weight: normal;
                            font-size: 14px;
                        }
                        .colon{
                            color: #333333;
                        }
                    }
                }
            }
            .contBox{
                width: calc(100% - 3rem);
                background: white;
                // height: 190px;
                margin: 0 0.5rem 0.5rem 0.5rem;
                display: flex;
                padding: 0.5rem;
                .singleBox{
                    width: 33.3%;
                    background: white;
                    img{
                        width: 100%;
                        // height: 100px;
                        height:30vw;
                        border-radius: 5px;
                    }
                    span,del,p{
                        color: black;
                        font-size: 1rem;
                        font-weight: normal;
                    }
                    strong{
                        font-size: 18px;
                    }
                    .oldPrice{
                        background: #999999;
                        color: white;
                        padding: 3px;
                    }
                }
            }
            .mainContext{
                width: calc(100% - 1rem);
                display: flex;
                flex-wrap: wrap;
            }
            .titles{
                color: white;
                margin:0 0.5rem 1rem 0.5rem ;
                span:hover{
                    cursor: pointer;
                }
            }
            .shopBox:nth-child(1),.shopBox:nth-child(2){
                margin: 0 0.5rem 0.5rem 0.5rem ;
            }
            .shopBox{
                width: calc(50% - 1rem);
                // height: 260px;
                margin: 0.5rem ;
                overflow: hidden;
                background: white;
                border-radius: 5px;
                img{
                    width: 100%;
                    // height: 165px;
                    height: 30vw;
                }
                .text-box{
                    padding: 5px;
                }
                span{
                    color: #333333;
                    font-weight: normal;
                    font-size: 14px;
                }
                p{
                    padding: 5px 0 0 0;
                    margin: 0;
                }
                .priceText{
                    font-size: 1rem;
                }
                .coupon{
                    border: 1px solid #8e7e6f;
                    font-size: 12px;
                }
                .typeOne{
                    border-right: none;
                    padding-right: 5px;
                }
                .typeTwo{
                    border-left: 1px dashed #8e7e6f;
                    padding:0 5px;
                }
            }
            .noMore{
                color: white;
                width: 100%;
                margin-top: 30px;
                text-align: center;
            }
        }
    }
</style>